<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>小罗后台管理系统</title>
    <link rel="stylesheet" href="/assets/layui/css/layui.css">
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 导入公共页面 -->
        {{ include "./common/header.html" }}

        <!-- 导入公共页面 -->
        {{ include "./common/side.html" }}
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <h1 style="margin: 10px 60px;">系统设置</h1>
                <form class="layui-form" id="systemForm" lay-filter="example">
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-inline">
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                                class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">网站</label>
                        <div class="layui-input-inline">
                            <input type="file" name="photo" id="photo" onchange="uploadFile(this)" style="display:none">
                            <a class="layui-btn" href="javascript:;" id="upload">+</a>
                            <img src="" id="preview" alt="" style="width:80px">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="submitForm">编辑</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-footer">
            <!-- 底部固定区域 -->
            底部固定区域
        </div>

    </div>
    <script src="/assets/layui/layui.js"></script>
    <script>
        // const reg = /\?id=(\d+)/
        // const [, id] = location.search.match(reg)
        // let result = await $.get('/fetchOneArt', { id })
        // let { title } = result
        // 回显表单数据
        // form.val("example", {
        //     title
        // })
        // 上传文件
        $("#upload").on('click', () => {
            $("#photo")[0].click();
        })
        // 上传文件
        function uploadFile(fileEle) {
            const file = fileEle.files[0];
            // 预览图片
            const fileReader = new FileReader();
            fileReader.readAsDataURL(file)
            fileReader.onload = function () {
                const base64 = this.result
                console.log(base64)
                $("#preview").attr('src', base64)
            }

        }
        $("#submitForm").on('click', async () => {
            const formData = new FormData($("#systemForm")[0])
            const { code, message } = await $.ajax({
                url: "/updSystemData",
                type: 'post',
                data: formData,
                contentType: false,
                processData: false
            })
            layer.msg(message)
            if (code === 0) {
                // console.log('ok');
                location.href = '/index'
            }
        })

    </script>

</body>

</html>